<template>
  <div class="business-page">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	   <f-navbar title="商家页面" fontColor="#000" bgColor="#fff" :scrollTop="scrollTop" navbarType='5'></f-navbar>
	   <div style="padding:0 32rpx">
		   <div class="business-top" :style="{'margin-top':systemInfo.navBarH+'px'}">
			   <div class="logo">
				   <image :src="info.storeLogo" style="width:110rpx;height:110rpx" mode="scaleToFill"/>
			   </div>
			   <div class="info">
				   <div class="b-font">{{info.storeName}}</div>
				   <div class="s-font">
					   <img src="https://pic.moresu.com/Fhf6_4NIy9aj6gfwvnmFNjT-pa51" style="width: 124rpx;height: 39rpx;"/>
				   </div>
			   </div>
			   <div class="gz-div">
				   <u-button text="已关注" type="primary" shape="circle" size="small" color="#FF5E01" :customStyle="{width:'110rpx',height:'44rpx',margin:'0 auto'}" v-if="info.logId" @click="delAttention"></u-button>
				   <u-button text="+关注" type="primary" shape="circle" size="small" color="#FF5E01" :plain="true" :customStyle="{width:'110rpx',height:'44rpx',margin:'0 auto'}" v-else @click="attention"></u-button>
				   <div class="sub-text">{{info.followNum}}人关注</div>
			   </div>
		   </div>
	   </div>
	   <div class="business-nav">
		   <div class="nav-item" @click="toNewPage('/pagesUser/business/businessPage?storeId='+storeId)">
		   			   首页
		   			   <div class="bg-item"></div>
		   </div>
		   <div class="nav-item" @click="toNewPage('/pagesUser/business/businessAbout?storeId='+storeId)">
		   			   关于我们
		   			   <div class="bg-item"></div>
		   </div>
		   <div class="nav-item" @click="toNewPage('/pagesUser/business/businessGoods?storeId='+storeId)">
		   			   产品
		   			   <div class="bg-item"></div>
		   </div>
		   <div class="nav-item active">
		   			   联系方式
		   			   <div class="bg-item"></div>
		   </div>
	   </div>
	   
	   
	   
	   
	  <div class="block ">
		   <div class="block-title id-contact">
			   <img src="https://pic.moresu.com/FlIhBhtNw4oATV-rA1eYG1do_fUF"  style="width:28rpx;height:28rpx;"/>
			   <span style="padding-left:16rpx;">联系方式</span>
		   </div>
		   <div class="business-base contact">
			    <div>联系人：<span style="padding-left:20rpx">{{info.contactPerson}}</span></div>
				<div>联系电话：
				   <span style="padding-left:20rpx;padding-right:30rpx;">{{info.storePhone}}</span>
				   <span class="btn-span" v-if="info.storePhone && info.storePhone.indexOf('*') != -1" @click="toLink">认证后可查看</span>
				   <span class="btn-span" v-else @click="phoneInquiry">联系商家</span>
				</div>
				<div v-if="info.website != ''">公司网址：<span style="padding-left:20rpx">{{info.website}}</span></div>
				<div>公司地址：<span style="padding-left:20rpx">{{info.storeArea}}{{info.storeAddress}}</span></div>
		   </div>
	   </div>
	   
	  
  </div>
</template>

<script>
  import {
    storeDetail,
    mainBusiness,
    setMyAttention,
    delMyAttention
  } from '@/config/api2.js'
     import {pageSeo} from '@/config/api.js'
  import fNavbar from '@/components/module/f-navbar/f-navbar';
  export default {
	  components: {
	    fNavbar
	  },
    data() {
   
      return {
        storeId: 0,
        info: {},
		systemInfo:{
		    statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
		    // #ifdef MP-ALIPAY
		    navBarH: uni.getSystemInfoSync().statusBarHeight + uni.getSystemInfoSync().titleBarHeight, //菜单栏总高度--单位px
		    titleBarHeight: uni.getSystemInfoSync().titleBarHeight, //标题栏高度--单位px
		    // #endif
		    // #ifndef MP-ALIPAY
		    navBarH: uni.getSystemInfoSync().statusBarHeight + 44, //菜单栏总高度--单位px
		    titleBarHeight: 44, //标题栏高度--单位px
		    // #endif
		},
		imgList:[],
		scrollTop:0,
      }
    },
    onLoad(e) {
      this.storeId = e.storeId
      this.getStoreDetail()
	  // #ifdef H5
	  pageSeo({pageType: 'storeDetailPage',id:this.storeId}).then((res)=>{
	  	document.title = res.pageTitle;
	  })
	  // #endif
    },
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
    methods: {
		toNewPage(url){
			uni.redirectTo({
			  url: url
			})
		},
		
		
			
		preview(e,index){
			uni.previewImage({urls: this.imgList[index]['list'],current: e});
		},
		preview2(url){
			uni.previewImage({urls: [url]});
		},
      getStoreDetail() {
        storeDetail({
          storeId: this.storeId
        }).then(res => {
          this.info = res;

        })

      },
      attention() {
        setMyAttention({
          collectType: 'store',
          storeId: this.storeId
        }).then(res => {
          uni.showToast({
            title: '关注成功',
            duration: 1000,
            icon: 'none'
          })
          this.getStoreDetail()
        })
      },
      delAttention() {
        uni.showModal({
          content: '是否取消关注？',
          success: (res) => {
            if (res.confirm) {
              delMyAttention({
                logid: this.info.logId
              }).then(() => {
                uni.showToast({
                  title: '已取消',
                  duration: 1000,
                  icon: 'none'
                })
                this.getStoreDetail()
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      
	  
      phoneInquiry() {
        uni.makePhoneCall({
          phoneNumber: this.info.storePhone,
        })
      },
     
	 
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/common.scss';
  .business-page{
	  padding:32rpx 0;
	  background: url("https://pic.moresu.com/FimZoT7JzrL-cxdUzhRE7cAJxAW5") no-repeat #fff;
	  background-size: contain;
	  min-height: 100vh;
	  .business-top{
		  background: rgba(255,255,255,1);
		  border-radius: 18rpx;
		  padding:24rpx;
		  @include flexbox(flex-start,center);
		  .logo{
			  width: 110rpx;
			  height: 110rpx;
			  background: rgba(255,255,255,1);
			  border: 1rpx solid #B8B8B8;
			  opacity: 1;
			  border-radius: 30rpx;
			  overflow: hidden;
		  }
		  .info{
			  flex:1;
			  padding:0 20rpx;
			  .b-font{
				  font-size: 28rpx;
				  font-weight: bold;
				  color: #070D14;
			  }
			  .s-font{
				  margin-top:10rpx;
				  font-size: 20rpx;
				  color: #929292;
				  .label{
					  background: rgba(52,120,255,1);
					  border-radius: 5px;
					  color:#fff;
					  padding:0 8rpx
				  }
			  }
		  }
		  .gz-div{
			  text-align: center;
			  .sub-text{
				  font-size: 20rpx;
				  margin-top:10rpx;
				  color: #A5A5A5;
			  }
		  }
		  
	  }
      .business-nav{
		  margin-top:40rpx;
		  height: 159rpx;
		  background: linear-gradient(180deg, #FFAD65 0%, #FF3400 100%);
		  border-radius: 18rpx;
		  @include flexbox(space-around,flex-start);
		  padding-top:20rpx;
		  .nav-item{
			  font-size: 28rpx;
			  line-height: 38rpx;
			  color: #FFFFFF;
			  width:25%;
			  text-align: center;
		  }
		   .nav-item .bg-item{
			   display:none;
		   }
		  .nav-item.active{
			  font-weight: bold;
			  color: #FF5D00;
			  font-size:30rpx;
		  }
		  .nav-item.active .bg-item{
			  display: block;
			  background: linear-gradient(180deg, #FFE2D1 0%, #FFFFFF 100%);
			  height:110rpx;
			  margin-top: -70rpx;
			  border-top-left-radius: 18rpx;
			  border-top-right-radius: 18rpx;
		  }
	  }
	  .block{
		  background: #fff;
		  border-radius: 18rpx;
		  padding:24rpx 32rpx;
		  margin-top:-80rpx;
		  .block-title{
			  font-size: 28rpx;
			  font-weight: bold;
			  color: #000000;
			  @include flexbox(flex-start,center);
		  }
		  .goods-list{
			  margin-top:40rpx;
			  .goods-item{
				  border: 1px solid #B8B8B8;
				  border-radius: 15rpx;
				  padding:0 24rpx;
				  .goods-top{
					  @include flexbox(space-between,center);
					  font-size: 30rpx;
					  color: #070D14;
					  padding:24rpx 0;
					  .goods-name{
						  padding-right:40rpx;
						  @include textoverflow(1)
					  }
					  .goods-price{
							color: #FF0000;
							font-weight: bold;
					  }
				  }
				  .goods-attar{
					  font-size: 24rpx;
					  color: #B8B8B8;
					  padding-bottom:24rpx;
					  border-bottom:1px solid #DEDEDE;
				  }
				  .goods-bottom{
				    @include flexbox(space-between,center);
					font-size: 20rpx;
					color: #929292;
					padding:24rpx 0;
					.goods-time{
						@include flexbox(flex-start,center);
					}
				  }
			  }
		  }
	  }
	  .business-base{
		  background: rgba(254,249,246,1);
		  background-size: cover;
		  border-radius: 18rpx;
		  padding:24rpx;
		  margin:24rpx 0;
		 font-size: 24rpx;
		 line-height: 50rpx;
		 color: #000;
		 .btn-span{
			 border-radius: 25rpx;
			 border:1rpx solid #000;
			 padding:0 20rpx; 
		 }
	  }
 
      .xc-div.block{
		   margin-top:32rpx;
		   .xc-item{
			   padding-top:64rpx;
			   .xc-text{
				   text-align: center;
				   font-size: 24rpx;
				   color: #000000;
				   margin-top:20rpx;
				   font-weight: bold;
			   }
		   }
	  }
  }
</style>